<template>
	<div class="wrapper">
        <div v-show="shCity">
            <head-title :title="headText" @callback="onClickLeft"></head-title>
            <div class="addbankcard wrapbd">
                <label>*请绑定实名认证用户的银行卡</label>
                <cell-group>
                    <field label="开户名" v-model="cardname" placeholder="请输入开户名" />
                    <field label="卡号" v-model="cardnub" type="tel" placeholder="请输入卡号" />
                </cell-group><br>
                <cell-group>
                    <cell title="地区" :value="selectCityname" @click='showProvince' is-link/>
                    <cell title="开户行" :value="selectBankname" is-link  @click="selectBank" />
                    <field label="支行名称" v-model="bankname" placeholder="请输入支行名称" />
                </cell-group>
            </div>
            <input class="l_button" type="button" value="确认" @click="onClickaddBank" :disabled="disableBtn">
        </div>
		<!--银行卡-->
		<div class="merchant" v-show="iscard">
			<div class="forms" v-for="(item,index) in backcardlist" :key="index" @click="selectBankCard(item)">
				<label v-text="item.name" style=" width: 80%;"></label><i class="fa right fa-angle-right fa-lg iconfont" aria-hidden="true"></i>
			</div>
		</div>
        <div v-show="allActive">
            <area-list ref='selectpro' @ievent = "ievent"></area-list>
        </div>
	</div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import AreaList from './../../components/area.vue';
    import { Cell, CellGroup, Field,} from 'vant';
	export default {
		data(){
			return {
                headText: '添加银行卡',  //顶部标题
                shCity: true, //显示本页面结构
                allActive: false,  //默认将城市组件隐藏
                iscard:false,  //隐藏开户行
                disableBtn:false,  //防止重复提交
                cardname:'',  //开户名
                cardnub:'',   //卡号
                bankname:'',  //支行名称
                selectCityname:'请选择',  //选中的省市区名称
                backcardlist:{},  //开户行
                selectBankname:'请选择',  //选中的开户行
                selectBankId:'',  //选中的开户行ID
			}
		},
		methods:{
			//返回
            onClickLeft () { this.$router.push('/bankList');},
            //选择省市区
            showProvince(){
                this.shCity = false; this.allActive = true;
                this.$refs.selectpro.checkGetarealist();  //调用子组件中的方法

            },
            //子组件中的值传递给父组件
            ievent(obj){
                this.shCity = true; this.allActive = false;
                this.selectCityname = obj.provinceName + obj.cityName + obj.areaName;
            },
            //获取开户行
			selectBank () { 
                let _this = this;
                this.Tools.AXIOS({
                    url: 'bank/blist',
                    success: function (res) {
                        _this.shCity = false; _this.iscard = true;
                        _this.backcardlist = res.data.data
                    }
                })
            },
            //选择开户行
            selectBankCard(item){
                this.shCity = true; this.iscard = false;
                this.selectBankname = item.name;
                this.selectBankId = item.bank_id;
            },
            //确认添加银行卡
            onClickaddBank(){
                let _this = this;
                if(!this.Tools.regCombination.null.test(_this.cardname)){
					this.$toast({message: '请输入开户名', position: 'bottom',duration: 1500})
				}else if(!this.Tools.regCombination.null.test(_this.cardnub)){
                    this.$toast({message: '请输入卡号', position: 'bottom',duration: 1500})
                }else if(this.selectCityname == '请选择'){
                    this.$toast({message: '请选择地区', position: 'bottom',duration: 1500})
                }else if(this.selectBankname == '请选择'){
                    this.$toast({message: '请选择开户行', position: 'bottom',duration: 1500})
                }else if(!this.Tools.regCombination.null.test(_this.bankname)){
                    this.$toast({message: '请输入支行名称', position: 'bottom',duration: 1500})
                }else{
                    this.disableBtn = true;
                    this.Tools.AXIOS({
                        url: 'bank/add',
                        transformRequest: {
                            bank_id : this.selectBankId,  //开户行ID
                            bank_name : this.selectBankname,  //开户行
                            account_name :this.cardname,   //开户名
                            bank_no : this.cardnub,  //卡号
                            bank_branch_name : this.bankname,  //支行名称
                            bank_address: this.selectCityname,   //省市区
                        },
                        success: function (res) {
                            _this.$toast.success('添加成功');
                            setTimeout(function(){
                                _this.disableBtn = true;
	                       		_this.$router.push('/bankList');
	                        },3000)
                        },
                        error(res){
                            _this.disableBtn = false;
                        }
                    })
                }
            }
		},
		components: {
            HeadTitle,
            Cell,
            CellGroup,
            Field,
            AreaList
		},
	}
</script>
<style scoped>
.addbankcard label{display: block; background: #F1F1F1; word-wrap: break-word; padding: .3rem .3rem;color: rgb(93,100,110);}
.merchant{ width: 100%; background: #fff; position: absolute; top: 0; z-index: 1000;}
.merchant .forms{ width: 100%; font-size: .35rem; padding: .4rem 0; border-bottom: 1px solid #F1F1F1;}
.merchant .forms label{ padding-left: .5rem; }
.merchant .forms i{ margin:.1rem .2rem 0 0; }
</style>